<template>
  <div class="box1-1">
    <el-card class="box-card">
      <div calss="filler">
        <div class="title99"> <h3>每周·影片票房</h3></div>
        <div class="aaa">
          <el-select
            v-model="selectedWeek"
            placeholder="请选择周数"
            @change="getData"
          >
            <el-option
              v-for="week in weeks"
              :key="week"
              :label="`第${week}周`"
              :value="week"
            ></el-option>
          </el-select>
        </div>
      </div>
    </el-card>
    <div class="building99">
      <el-table :data="tableData" style="width: 100%">
        <el-table-column type="selection" width="50" />
        <el-table-column prop="filmName" label="影片名称" width="280" />
        <el-table-column
          prop="box_office"
          label="票房（万元）"
          width="200"
          sortable
        />
        <el-table-column
          prop="people"
          label="人次（万人）"
          width="200"
          sortable
        />
        <el-table-column
          prop="session"
          label="场次（千场）"
          width="200"
          sortable
        />
        <el-table-column
          prop="showDate"
          label="上映日期"
          width="150"
          sortable
        />
        <el-table-column
          prop="totalSell"
          label="累积票房收入（万元）"
          width="130"
          sortable
        />
        <el-table-column prop="week" label="周数" width="80" />
      </el-table>
    </div>
  </div>
</template>
  
  <script>
export default {
  data() {
    return {
      tableData: [],
      selectedWeek: 1,
      weeks: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16],
    };
  },

  methods: {
    getData() {
      this.$http
        .get("/filmWeek/v1/week/" + this.selectedWeek)
        .then((response) => {
          console.log(this.selectedWeek);
          this.tableData = response.data;
        })
        .catch((error) => {
          console.log(error);
        });
    },
  },
  mounted() {
    // 获取默认周数的数据
    this.getData();
  },
};
</script>
  
  <style>
.building99 {
  width: 98%;
  margin-left: 16px;
  margin-top: 10px;
  height: 65px;
}
.box-card {
  width: 98%;
  margin-left: 16px;
  margin-top: 10px;
  height: 65px;
}
.fenye {
  margin-top: 20px;
  margin-left: 270px;
}
.filler {
  display: flex;
}
.title99{
  color: #0f3fce;
  margin-top:-17px;
}
.aaa {
  display: flex;
  align-items: center;
  margin-left: auto;
  flex-shrink: 0;
  width: 100%;
  max-width: 200px;
  margin-top:-45px;
}
.box1-1 {
  /* background: url("/public/koubeibg.jpg");
    background-size: cover; */
  background-color: rgb(230, 229, 229);
  overflow: auto;
  width: 100%;
}
</style>